import React from "react";
import {createStyles} from "antd-style";

const imageLink = "/api/photo"

const getImageLink = (containerIndex: number, index: number) => {
    let _imageLink = imageLink
    if (containerIndex != null && containerIndex != -1) {
        _imageLink = _imageLink + "/" + containerIndex
        if (index != null && index != -1) {
            _imageLink = _imageLink + "/" + index
        } else {
            _imageLink = _imageLink + '?t=' + Math.random()
        }
    } else {
        _imageLink = _imageLink + '?t=' + Math.random()
    }
    return _imageLink
}

const useStyle = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: -10;
            img {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
            .front {
                z-index: -10;
                object-fit: contain;
            }
            .backend {
                z-index: -20;
                filter: blur(10px);
                object-fit: cover;
            }
        `
    }
})

interface Props {
    containerIndex: number,
    index: number
}

const PhotoViewer: React.FC<Props> = ({containerIndex, index}) => {
    const {styles} = useStyle();
    const imageLink = getImageLink(containerIndex, index)

    return (
        <div className={styles.container}>
            <img className="front" src={imageLink} alt="图片"/>
            <img className="backend" src={imageLink} alt="图片"/>
        </div>
    )
}

export default PhotoViewer;
